<template>
  <div style="user-select: none">
    <main role="main">
      <nav
        class="navbar navbar-expand-lg navbar-light fixed-top"
        style="
          background-color: rgba(255, 255, 255, 0.5);
          backdrop-filter: blur(10px);
          padding: 0px;
          height: 60px;
        "
      >
        <a class="navbar-brand" style="position: absolute; left: 1.82%" href="#"
          ><img
            src="https://suanjiayun.oss-cn-chengdu.aliyuncs.com/3.0/images/logo.png"
            alt=""
            style="width: 134px; height: 40px"
        /></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarTogglerDemo02"
          aria-controls="navbarTogglerDemo02"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div
          class="navbar-collapse collapse"
          id="navbarTogglerDemo02"
          style="justify-content: flex-end"
        >
          <ul class="navbar-nav mr-auto mt-2 mt-lg-0"></ul>
          <div class="right_box">
            <ul class="navbar-nav me-auto mb-2 mb-sm-0">
              <li class="nav-item">
                <!-- <nuxt-link to="mirror" target="_blank">应用社区</nuxt-link> -->
                <a class="nav-link" href="/mirror" target="_blank">应用社区</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/help" target="_blank">帮助手册</a>
              </li>

              <a href="/container/#/instanceCreate" target="_blank">
                <button
                  type="button"
                  class="btn btn-primary join_web"
                  id="enter_btn"
                >
                  进入平台
                </button>
              </a>
            </ul>
          </div>
        </div>
      </nav>

      <div class="background"></div>
      <!-- <div class="block_top"></div> -->

      <div class="top" style="overflow: hidden">
        <div class="topTitle">算家云AI算力服务平台</div>
        <div class="desc">
          汇聚算力资源、融合AI技术，提供更加极致的AI计算服务
        </div>

        <a href="/container/#/instanceCreate" target="_blank"
          ><button class="experienceButten">立即体验</button></a
        >
      </div>
      <div class="gpuBox">
        <div class="gpuTitle">GPU型号价格</div>
        <div class="gpuContent">
          <div class="gpuList">
            <div class="performance">性价比UP</div>
            <div class="gpuModel">RTX 3090</div>
            <div class="gpuPrice">
              <span class="priceLogo"> ￥ </span>
              <span class="price">1.68</span>
              <span class="time"> /小时 </span>
            </div>
            <a
              href="/container/#/instanceCreate?gpuType=RTX 3090"
              target="_blank"
            >
              <div class="useButton">立即使用</div>
            </a>
          </div>
          <div class="gpuList performanceKing">
            <div class="performance">性能王者</div>
            <div class="gpuModel">RTX 4090</div>
            <div class="gpuPrice">
              <span class="priceLogo"> ￥ </span>
              <span class="price">2.68</span>
              <span class="time"> /小时 </span>
            </div>
            <a
              href="/container/#/instanceCreate?gpuType=RTX 4090"
              target="_blank"
            >
              <div class="useButton">立即使用</div>
            </a>
          </div>
          <div class="gpuList">
            <div class="performance">萌新推荐</div>
            <div class="gpuModel">RTX 3060</div>
            <div class="gpuPrice">
              <span class="priceLogo"> ￥ </span>
              <span class="price">0.68</span>
              <span class="time"> /小时 </span>
            </div>
            <a
              href="/container/#/instanceCreate?gpuType=RTX 3060"
              target="_blank"
            >
              <div class="useButton">立即使用</div>
            </a>
          </div>
        </div>
      </div>

      <!-- 响应式开始 -->
      <div class="use-box">
        <div class="use-content">
          <div class="use-title">一键部署 一点使用</div>
          <div class="mid-box">
            <a href="/container/#/mirrorDetails?id=66b1eee5884a7e8b54cf080c">
              <div class="mid-button">ComfyuUI</div>
            </a>
            <a href="/container/#/mirrorDetails?id=66b465519e374155be5fb0e2">
              <div class="mid-button">
                <img
                  src="@/static/images/Open-sora.png"
                  class="mid-img"
                  alt="Open-sora"
                />
                Open-sora
              </div>
            </a>
            <a href="/container/#/mirrorDetails?id=66b42e459e374155be5fb074">
              <div class="mid-button">
                <img
                  src="@/static/images/Baichuan.png"
                  class="mid-img"
                  alt="Baichuan"
                />
                Baichuan
              </div>
            </a>
            <a href="/container/#/mirrorDetails?id=66ac7d478099315577961758">
              <div class="mid-button">
                <img
                  src="@/static/images/ChatGLM.png"
                  s
                  class="mid-img"
                  alt="ChatGLM"
                />
                ChatGLM
              </div>
            </a>

            <a
              href="/container/#/instanceCreate?mirrorid=66ac7d478099315577961758"
            >
              <div class="mid-button">
                <img
                  src="@/static/images/lIama2.png"
                  class="mid-img"
                  alt="lIama2"
                />
                lIama2
              </div>
            </a>
            <div class="mid-button">
              <img
                src="@/static/images/TONGYI.png"
                class="mid-img"
                alt="TONGYI"
              />
              TONGYI
            </div>
            <div class="mid-button">Cuda</div>
            <div class="mid-button">
              <img
                src="@/static/images/Miniconda.png"
                class="mid-img"
                alt="Miniconda"
              />
              Miniconda
            </div>
          </div>
          <a href="/container/#/instanceCreate" target="_blank">
            <div class="experience-a">立即体验 ></div>
          </a>
        </div>
      </div>
      <!-- 响应式结束 -->

      <div class="cooperationBox">
        <div class="cooperationTitle">深入合作</div>
        <div class="midBox2">
          <div class="customizedBox">
            <img
              src="@/static/images/background1.png"
              class="customizedImg"
              alt=""
            />
            <div class="customizedTitle" style="display: flex; z-index: 999">
              定制算力
            </div>
            <div class="customizedContent" style="display: flex; z-index: 999">
              根据不同AI计算场景需求，打造专属AI算力集群，定制AI计算解决方案。
            </div>
            <a href="tel:15285118456">
              <div class="contactButton" style="display: flex; z-index: 999">
                联系我们
              </div>
            </a>
          </div>
          <div class="customizedBox">
            <img src="@/static/images/background2.png" class="customizedImg" />
            <div class="customizedTitle">算力入驻</div>
            <div class="customizedContent">
              闲置算力资源接入，统一纳管、标准服务、优享利润分成。
            </div>
            <a href="tel:15285118456">
              <div class="contactButton">联系我们</div>
            </a>
          </div>
          <div class="customizedBox">
            <img src="@/static/images/background3.png" class="customizedImg" />

            <div class="customizedTitle">科研定制</div>
            <div class="customizedContent">
              共同在AI计算领域的关键技术研究、人才培养成果转移转化、标准制订等全方位开展合作。
            </div>
            <a href="tel:15285118456">
              <div class="contactButton">联系我们</div>
            </a>
          </div>
        </div>
        <div class="midBox2" style="height: 10vw; margin-bottom: 4vw">
          <div class="customizedButton">
            <img
              class="customizedLogo"
              src="@/static/images/WhiteCloudMountain.png"
              alt="白山云科技"
            />
            <a
              id="hexagon_mid_a"
              href="https://www.baishan.com/"
              target="_blank"
              ><span class="partnersName">白山云科技</span></a
            >
          </div>
          <div class="customizedButton">
            <img
              class="customizedLogo"
              src="@/static/images/Supercomputing.png"
              alt="贵安超算"
            />
            <a
              id="hexagon_mid_a"
              href="http://www.gzcompute.com"
              target="_blank"
              ><span class="partnersName">贵安超算</span></a
            >
          </div>
          <div class="customizedButton">
            <img
              class="customizedLogo"
              src="@/static/images/ScienceTechnologyInnovation.png"
              alt="贵安科创"
            />

            <a
              id="hexagon_mid_a"
              href="http://www.gzcompute.com"
              target="_blank"
              ><span class="partnersName">贵安科创</span></a
            >
          </div>
          <div class="customizedButton">
            <img
              class="customizedLogo"
              src="@/static/images/Ruiyun.png"
              alt="深圳瑞云科技"
            />

            <a
              id="hexagon_mid_a"
              href="https://www.rayvision.com"
              target="_blank"
              ><span class="partnersName">深圳瑞云科技</span></a
            >
          </div>
          <div class="customizedButton">
            <img
              class="customizedLogo"
              src="@/static/images/telecom.png"
              alt="中国电信"
            />

            <a
              id="hexagon_mid_a"
              href="http://www.chinatelecom.com.cn"
              target="_blank"
              ><span class="partnersName">中国电信</span></a
            >
          </div>
          <div class="customizedButton">
            <img
              class="customizedLogo"
              src="@/static/images/GuizhouUniversity.png"
              alt="贵州大学"
            />

            <a id="hexagon_mid_a" href="https://www.gzu.edu.cn" target="_blank"
              ><span class="partnersName">贵州大学</span></a
            >
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="top_footer" style="position: relative">
          <div class="top_box">
            <div class="top_left_footer">
              <img
                class="suanjiayunLogo"
                src="https://suanjiayun.oss-cn-chengdu.aliyuncs.com/3.0/images/logo.png"
              />
              <div class="product">
                <div class="title">生态产品</div>
                <a href="https://www.renderbus.com/?suanjiayun" target="_blank">
                  <div class="product_item">Renderbus瑞云渲染</div>
                </a>
                <a href="https://qingjiaocloud.com/?suanjiayun" target="_blank">
                  <div class="product_item">青椒云云电脑</div>
                </a>
                <a href="https://www.3dcat.live/?suanjiayun" target="_blank">
                  <div class="product_item">3DCAT实时渲染</div>
                </a>
                <a href="https://www.raysync.cn/?suanjiayun" target="_blank">
                  <div class="product_item">云镭速传输</div>
                </a>
                <a href="https://www.raylink.live/?suanjiayun" target="_blank">
                  <div class="product_item">RayLink远程控制软件</div>
                </a>
              </div>
              <div class="contact">
                <div class="title">联系我们</div>
                <div class="contact_item">
                  <div class="icon">
                    <img
                      src="https://suanjiayun.oss-cn-chengdu.aliyuncs.com/3.0/images/suanjia.png"
                      alt=""
                    />
                  </div>
                  <a href="http://sj.suanjiayun.com" target="_blank">
                    <div class="product_item">算家计算</div>
                  </a>
                </div>
                <div class="contact_item">
                  <div class="icon">
                    <img src="@/static/images/Vector.png" alt="" />
                  </div>
                  <div class="container">+86 15285118456</div>
                </div>
                <div class="contact_item">
                  <div class="icon">
                    <img src="@/static/images/email.png" alt="" />
                  </div>
                  <div class="container">yangjiawei@suanjiayun.com</div>
                </div>
                <div class="contact_item">
                  <div class="icon">
                    <img src="@/static/images/24.png" alt="" />
                  </div>
                  <div class="container">24小时服务</div>
                </div>
                <div class="contact_item">
                  <div class="icon">
                    <img src="@/static/images/address.png" alt="" />
                  </div>
                  <div class="container">
                    贵州省贵阳市花溪区板桥艺术村A57 R空间
                  </div>
                </div>
              </div>
            </div>
            <div class="top_right_footer">
              <div class="cannel_item">
                <div class="code_img">
                  <img
                    src="https://suanjiayun.oss-cn-chengdu.aliyuncs.com/3.0/images/bilibili.png"
                    alt=""
                  />
                </div>
                <div class="title">B站官方号</div>
              </div>
              <div class="cannel_item">
                <div class="code_img">
                  <img
                    src="https://suanjiayun.oss-cn-chengdu.aliyuncs.com/3.0/images/guanfang.png"
                    alt=""
                  />
                </div>
                <div class="title">官方公众号</div>
              </div>
              <div class="cannel_item">
                <div class="code_img">
                  <img
                    src="https://suanjiayun.oss-cn-chengdu.aliyuncs.com/3.0/images/dy.png"
                    alt=""
                  />
                </div>
                <div class="title">官方抖音号</div>
              </div>
              <div class="cannel_item cannel_item2">
                <div class="code_img">
                  <img
                    src="https://suanjiayun.oss-cn-chengdu.aliyuncs.com/3.0/images/csdn.png"
                    alt=""
                  />
                </div>
                <div class="title">CSDN号</div>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom_footer">
          <div class="ip">
            <span
              class="beianhao"
              style="
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                color: rgba(180, 180, 180, 1);
              "
              onclick="window.open('http://beian.miit.gov.cn/')"
            >
              <img
                src="@/static/images/PublicSecurity.png"
                style="width: 16px; height: 16px; margin-right: 4px"
              />
              黔ICP备2022005134号-2 | 贵公安备52011102002831号</span
            >

            <span class="company" style="color: rgba(180, 180, 180, 1)"
              >@2024 www.suanjiayun.com 贵州算家计算服务有限公司版权所有</span
            >
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  mounted() {
    var _hmt = _hmt || []
    ;(function () {
      var hm = document.createElement('script')
      hm.src = 'https://hm.baidu.com/hm.js?7c5abecc2cd2f4f1d8e707f1f01dd4d3'
      var s = document.getElementsByTagName('script')[0]
      s.parentNode.insertBefore(hm, s)
    })()
  },
}
</script>

<style lang="scss" scoped>
// four.css
.use-box {
  background-color: rgba(63, 181, 73, 1);
  height: 38vw;
  background-image: url(./@/static/images/useBackground.png);
  /* opacity: 0.4; */
  background-size: 100% 100%;
  padding-bottom: 50px;
}
.navbar {
  background-color: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  padding: 0px !important;
  height: 60px !important;
}
.use-content {
  width: 62.5vw;
  height: 38vw;
  margin: 0 auto;
  text-align: center;
}

.use-title {
  width: 62.5vw;
  margin-bottom: 3.3vw;
  font-size: 2.5vw;
  font-weight: 700;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  padding-top: 4vw;
}

.mid-box {
  width: 62.5vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.mid-button {
  width: 14.844vw;
  height: 4.167vw;
  border-radius: 0.8vw;
  background: linear-gradient(
    180deg,
    rgba(254, 254, 254, 1) 0%,
    rgba(233, 248, 255, 1) 100%
  );
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25vw;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: rgba(33, 33, 33, 1) !important;
  margin-top: 1vw;
  white-space: nowrap;
  cursor: pointer;
}

.mid-button:hover {
  font-size: 1.5vw;
}

.mid-img {
  width: 2.084vw;
  height: 2.084vw;
  margin-right: 0.7vw;
}

.experience-a {
  width: 11.563vw;
  height: 3.125vw;
  margin: auto;
  background: rgba(255, 255, 255, 1);
  line-height: 3.125vw;
  color: rgba(63, 181, 73, 1);
  margin-top: 3.3vw;
  font-size: 1.1vw;
}

.experience-a:hover {
  box-shadow: 0px 10px 20px rgba(46, 157, 55, 0.3);
}

//navbar.css
a:link,
a:visited {
  text-decoration: none;
}

.btn-primary:focus {
  box-shadow: none !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus {
  box-shadow: none !important;
}

// .right_box {
// display: flex;
// justify-content: flex-end;
// align-items: flex-end;
// position: absolute;
// right: 0;
// }

.nav-item {
  margin: 0 35px 0 0;
  /* box-sizing: border-box; */
  /* height: 40px; */
  /* position: relative; */
  width: 100px;
}

.nav-item .nav-link {
  display: block;
  color: rgba(34, 34, 34, 1) !important;
  height: 60px;
  line-height: 60px;
  padding: 0;
}

.nav-item .nav-link:hover {
  color: #42b64d !important;
}

.join_web:hover {
  background-color: #3cad46 !important;
  border-color: rgba(63, 181, 73, 0.2) !important;
}

.nav-item nav-link:hover {
  color: rgba(63, 181, 73, 0.8) !important;
}

.mid_box {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1vw;
}

.mid_box button:hover {
  background-color: #237e2a !important;
  color: #fff !important;
}

.image_pic img {
  cursor: pointer;
}
.footer .bottom_footer .ip .beianhao {
  color: rgba(180, 180, 180, 1);
}
.footer .bottom_footer .ip .beianhao:hover {
  color: #ccc;
}

.footer
  .top_footer
  .top_box
  .top_left_footer
  .contact
  .contact_item
  .container:hover {
  color: #3fb549 !important;
}

.footer .top_footer .top_box .top_left_footer .product .product_item:hover {
  color: rgba(63, 181, 73, 1) !important;
}
.join_web {
  background-color: rgba(63, 181, 73, 1) !important;
  border-color: rgba(63, 181, 73, 1) !important;
  width: 160px !important;
  height: 60px !important;
  border-radius: 0;
}
.suanjiayunLogo {
  width: 140px;
  height: 42px;
  margin-right: 63.44px;
}

@media (max-width: 1199.98px) {
  .background {
    top: 2vw !important;
  }

  .block_top {
    width: 100vw;
    height: 5vw;
    display: block;
  }

  .topTitle {
    top: 7.5vw !important;
  }

  .desc {
    top: 12.5vw !important;
  }

  .suanjiayunLogo {
    display: none;
  }

  .banner .banner_box .title_box {
    /* width: 39%; */
    height: 20%;
    width: 32vw;
    max-width: 422px;
    top: 40%;
    transform: translateY(-100%);
    position: absolute;
  }

  .banner .banner_box .title_box .title {
    font-size: 48px;
    font-weight: 900;
    color: #fff;
  }

  .banner .banner_box .title_box .desc {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 19px;
  }

  .banner {
    margin-top: 66px;
  }

  .banner .banner_box {
    margin: 0px auto 0px 10%;
  }

  .banner .banner_box .top_title {
    width: 25.97vw;
    max-width: 422px;
    top: 19%;
  }

  .banner .banner_box .join_btn {
    /* width: 20vw; */
    /* max-width: 422px; */
    /* top: 42%; */
    display: 'block';
  }

  .banner .banner_box .join_btn1 {
    width: 20vw;
    max-width: 422px;
    top: 42%;
    display: none;
  }

  .mid_box .use1 {
    position: absolute;
    bottom: 20%;
    left: 35%;
    width: 30%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 12%;
    font-size: 14px;
    border: none;
  }

  .mid_box .use2 {
    position: absolute;
    bottom: 27%;
    left: 35%;
    width: 30%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 11%;
    font-size: 14px;
    border: none;
  }

  .mid_box .use3 {
    position: absolute;
    bottom: 14%;
    left: 35%;
    width: 30%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 12.9%;
    font-size: 14px;
    border: none;
  }

  .footer {
    /* width: 100vw; */
    height: fit-content;
    margin-top: 70px;
    /* background-color: #272727; */
    color: #fff;
  }

  .footer .top_footer {
    /* width: 100vw; */
    height: fit-content;
    /* border-bottom: 1px solid #80C766; */
  }

  .footer .top_footer .top_box {
    /* width: 100vw; */
    height: fit-content;
    flex-direction: column;
    padding: 40px;
    display: flex;
  }

  .footer .top_footer .top_box .top_left_footer {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .footer .top_footer .top_box .top_left_footer .product {
    width: 40%;
    /* margin-right: 20px; */
  }

  .footer .top_footer .top_box .top_left_footer .product .title {
    font-size: 20px;
    color: rgba(68, 68, 68, 1);
  }

  .footer .top_footer .top_box .top_left_footer .product .product_item {
    font-size: 1rem;
    color: rgba(68, 68, 68, 1);
    margin: 15px 0;
  }

  .footer .top_footer .top_box .top_left_footer .contact {
    width: 40%;
  }

  .footer .top_footer .top_box .top_left_footer .contact .title {
    font-size: 20px;
    color: rgba(68, 68, 68, 1);

    /* margin-bottom: -15px; */
  }

  .footer .top_footer .top_box .top_left_footer .contact .contact_item {
    font-size: 14px;
    margin: 15px 0;
    display: flex;
    align-items: flex-start;
    color: rgba(68, 68, 68, 1);
  }

  .footer .top_footer .top_box .top_left_footer .contact .contact_item:hover {
    color: #3fb549 !important;
  }

  .footer
    .top_footer
    .top_box
    .top_left_footer
    .contact
    .contact_item
    .container:hover {
    color: #3fb549 !important;
  }

  .footer .top_footer .top_box .top_left_footer .contact .contact_item a {
    margin-left: 16px;
    color: rgba(68, 68, 68, 1);
  }

  .footer .top_footer .top_box .top_left_footer .contact .contact_item .icon {
    width: 13px;
    height: 13px;
  }

  .footer
    .top_footer
    .top_box
    .top_left_footer
    .contact
    .contact_item
    .icon
    img {
    width: 13px;
    height: 13px;
  }

  .footer
    .top_footer
    .top_box
    .top_left_footer
    .contact
    .contact_item
    .product_item:hover {
    color: #3fb549 !important;
  }

  .footer .top_footer .top_box .top_right_footer {
    /* width: 100vw; */
    height: 120px;
    /* flex-wrap: wrap; */
    margin-top: 10px;
    display: flex;
    justify-content: center;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    margin-right: 50px;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item2 {
    margin-right: 0;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item .code_img img {
    width: 90px !important;
    height: 90px !important;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item .title {
    font-size: 18px;
    margin-bottom: 0px;
    text-align: center;
    color: rgba(89, 89, 89, 1);
  }

  .footer .bottom_footer .ip {
    color: rgba(180, 180, 180, 1);
    /* width: 100vw; */
    height: 40px;
    /* background-color: #fff; */
    margin: 10px auto 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 13px;
    text-align: center;
    /* align-items: center; */
  }
}

@media (max-width: 1090px) {
  .banner .banner_box .title_box .title {
    font-size: 40px;
  }

  .navbar-toggler {
    position: absolute;
    right: 0;
  }

  .banner .banner_box .title_box .desc {
    font-size: 14px;
    letter-spacing: 16px;
  }
}

@media (max-width: 991px) {
  .navbar {
    height: 60px !important;
  }
  .right_box {
    margin-top: 52px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
  }

  .join_web {
    background-color: rgba(63, 181, 73, 1) !important;
    border-color: rgba(63, 181, 73, 1) !important;
    width: 160px !important;
    height: 60px !important;
  }

  .nav-item .nav-link {
    /* display: block; */
    /* color: rgba(34, 34, 34, 1) !important; */
    height: 40px;
    line-height: 40px;
    /* padding: 0; */
  }

  .navbar-nav {
    /* align-items: center; */
    justify-content: center;
    padding-left: 40px !important;
  }
}

@media (max-width: 940px) {
  .banner .banner_box .title_box .title {
    font-size: 35px;
  }

  .banner .banner_box .title_box .desc {
    font-size: 14px;
    letter-spacing: 12px;
  }
}

@media (max-width: 820px) {
  /* .navbar { */
  /* margin-bottom: 20px; */
  /* padding: 5px 1rem 5px 1rem !important; */
  /* } */

  /* .navbar .navbar_toggler{
    position: absolute;
    right: 0;
  } */

  .navbar-toggler {
    position: absolute;
    right: 0;
  }

  .mid_box .use1 {
    position: absolute;
    bottom: 22%;
    left: 32.5%;
    width: 35%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 12%;
    font-size: 11px;
    border: none;
  }

  .mid_box .use2 {
    position: absolute;
    bottom: 27%;
    left: 32.5%;
    width: 35%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 11%;
    font-size: 11px;
    border: none;
  }

  .mid_box .use3 {
    position: absolute;
    bottom: 14%;
    left: 32.5%;
    width: 35%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 13%;
    font-size: 11px;
    border: none;
  }
}

@media (max-width: 800px) {
  .banner .banner_box .title_box .title {
    font-size: 30px;
  }

  .banner .banner_box .title_box .desc {
    font-size: 14px;
    letter-spacing: 9px;
  }
}

@media (max-width: 695px) {
  /* .join_web {
    width: 80px !important;
    height: 30px !important;
    margin-bottom: 10px;
    border-radius: 4px !important;
    font-size: 12px;
  } */

  .banner .banner_box .title_box .title {
    font-size: 25px;
  }

  .banner .banner_box .title_box .desc {
    font-size: 12px;
    letter-spacing: 7px;
  }
}

@media (max-width: 595px) {
  .banner .banner_box .title_box {
    width: 34vw;
  }

  .banner .banner_box .title_box .title {
    font-size: 18px;
  }

  .banner .banner_box .title_box .desc {
    font-size: 6px;
    letter-spacing: 7.5px;
  }

  .mid_box .use1 {
    position: absolute;
    bottom: 22%;
    left: 31%;
    width: 38%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 12%;
    font-size: 6px;
    border: none;
  }

  .mid_box .use2 {
    position: absolute;
    bottom: 28%;
    left: 31%;
    width: 38%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 11%;
    font-size: 6px;
    border: none;
  }

  .mid_box .use3 {
    position: absolute;
    bottom: 17%;
    left: 31%;
    width: 38%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 12.8%;
    font-size: 6px;
    border: none;
  }

  .footer .top_footer .top_box .top_left_footer {
    width: 100%;
    display: flex;
    justify-content: center;
    /* align-items: center; */
  }

  .footer .top_footer .top_box .top_left_footer .product {
    width: 40%;
  }

  .footer .top_footer .top_box .top_left_footer .product .title {
    font-size: 14px;
  }

  .footer .top_footer .top_box .top_left_footer .contact a {
    font-size: 10px;
    color: #80c766;
    /* margin: 15px 0; */
    font-size: 10px;
    /* margin: 24px 0; */
    display: flex;
    /* padding-left: 15px; */
  }

  .footer .top_footer .top_box .top_left_footer .contact {
    width: 70%;
  }

  .footer .top_footer .top_box .top_left_footer .contact .title {
    font-size: 14px;
    /* margin-bottom: 15px; */
  }

  .footer .top_footer .top_box .top_left_footer .contact .contact_item {
    font-size: 10px;
    margin: 15px 0;
    display: flex;
  }

  .footer .top_footer .top_box {
    /* margin: auto 0; */
    display: flex;
    justify-content: center;
  }

  .footer .top_footer .top_box .top_right_footer {
    /* width: 100vw; */
    height: 150px;
    /* width: 300px; */
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item {
    width: 80px !important;
    height: 100px !important;
    margin-right: 8vw;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item:last-child {
    display: block;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item .title {
    font-size: 12px;
    width: 100% !important;
    color: rgba(89, 89, 89, 1);
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item .code_img img {
    /* width: 80px !important;
    height: 80px !important; */
    width: 60px !important;
    height: 60px !important;
    object-fit: fill;
  }

  .footer .bottom_footer .ip {
    width: 100%;
    /* background-color: #fff; */
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    color: rgba(255, 255, 255, 1);
    font-size: 11px;
    font-weight: 400;
    /* align-items: center; */
  }

  .footer .top_footer .top_box .top_left_footer .product {
    width: 40%;
  }

  .footer .top_footer .top_box .top_left_footer .contact {
    width: 40%;
  }

  .footer .top_footer .top_box .top_left_footer .product .product_item {
    font-size: 10px;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item {
    width: 60px !important;
    height: 80px !important;
  }
}

@media (max-width: 413px) {
  .banner .banner_box .title_box {
    width: 34vw;
  }

  .banner .banner_box .title_box .title {
    font-size: 16px;
  }

  .banner .banner_box .title_box .desc {
    font-size: 6px;
    letter-spacing: 6px;
  }
}

@media (min-width: 1200px) {
  .banner .banner_box {
    margin: 60px auto 140px auto;
  }

  .banner .banner_box .title_box {
    width: 39%;
    height: 18%;
    /* width: 21.97vw; */
    /* max-width: 422px; */
    top: 50%;
    transform: translateY(-100%);
    position: absolute;
  }

  .banner .banner_box .title_box .title {
    font-size: 59px;
    font-weight: 900;
    color: #fff;
  }

  .banner .banner_box .title_box .desc {
    font-size: 20px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 24px;
  }

  .banner .banner_box .top_title {
    width: 21.97vw;
    max-width: 422px;
    top: 19%;
  }

  .banner .banner_box .join_btn {
    width: 16.25vw;
    max-width: 422px;
    top: 45%;
    display: 'block';
  }

  .banner .banner_box .join_btn1 {
    width: 16.25vw;
    max-width: 422px;
    top: 45%;
    display: none;
  }

  .mid_box .use1 {
    position: absolute;
    bottom: 20%;
    left: 35%;
    width: 30%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 12%;
    font-size: 16px;
    border: none;
  }

  .mid_box .use2 {
    position: absolute;
    bottom: 27%;
    left: 35%;
    width: 30%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 11%;
    font-size: 16px;
    border: none;
  }

  .mid_box .use3 {
    position: absolute;
    bottom: 14%;
    left: 35%;
    width: 30%;
    border-radius: 4px;
    background-color: #fff;
    color: #578c78;
    height: 12.9%;
    font-size: 16px;
    border: none;
  }

  .mid_box button:hover {
    background-color: #237e2a !important;
    color: #fff !important;
  }

  .footer {
    /* width: 100vw; */
    height: 360px;
    /* background-color: #272727; */
  }

  .footer .top_footer {
    /* width: 100vw; */
    /* width: 1200px; */
    height: 273px;
    /* margin: 0 auto; */
  }

  .footer .top_footer .top_box {
    width: 1200px;
    height: 273px;
    margin: 0 auto;
    display: flex;
    /* justify-content: space-between; */
    justify-content: flex-end;
    border-bottom: 1px solid rgba(238, 238, 238, 1);
    margin-top: 60px;
  }

  .footer .top_footer .top_box .top_left_footer {
    /* width: 900px; */
    display: flex;
  }

  .footer .top_footer .top_box .top_left_footer .product {
    width: 136px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    margin-right: 44px;
  }

  .footer .top_footer .top_box .top_left_footer .product .title {
    font-size: 20px;
    font-weight: 400;
    color: rgba(33, 33, 33, 1);
    margin-bottom: 7.5px;
  }

  .footer .top_footer .top_box .top_left_footer .product .product_item {
    font-size: 14px;
    font-weight: 400;
    /* color: #80C766; */
    /* color: rgba(33, 33, 33, 1); */
    margin: 7.5px 0;
    cursor: pointer;
    color: rgba(68, 68, 68, 1);
  }

  .footer .top_footer .top_box .top_left_footer .product .product_item a {
    color: rgba(68, 68, 68, 1);
  }

  .footer .top_footer .top_box .top_left_footer .product .product_item:hover {
    color: rgba(63, 181, 73, 1) !important;
  }

  .product_item:hover {
    color: rgba(63, 181, 73, 1);
  }

  .footer .top_footer .top_box .top_left_footer .contact a {
    width: 308px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 14px;
    font-weight: 400;
    /* color: #80C766; */
    color: rgba(33, 33, 33, 1);
    /* margin: 7.5px 0; */
    cursor: pointer;
    padding-left: 15px;
  }

  .footer .top_footer .top_box .top_left_footer .contact {
    width: 308px;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
  }

  .footer .top_footer .top_box .top_left_footer .contact .title {
    font-size: 20px;
    font-weight: 400;
    color: rgba(33, 33, 33, 1);
    margin-bottom: 7.5px;
  }

  .footer .top_footer .top_box .top_left_footer .contact .contact_item {
    font-size: 14px;
    font-weight: 400;
    color: rgba(33, 33, 33, 1);

    margin: 7.5px 0;
    display: flex;
  }

  .footer .top_footer .top_box .top_left_footer .contact .contact_item .icon {
    width: 13px;
    height: 13px;
  }

  .footer
    .top_footer
    .top_box
    .top_left_footer
    .contact
    .contact_item
    .icon
    img {
    width: 13px;
    height: 13px;
  }

  .footer .top_footer .top_box .top_right_footer {
    /* width: 100%; */
    display: flex;
    justify-content: flex-end;
    /* align-items: flex-end; */
    /* margin-top: 63px; */
    margin-left: 26px;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item {
    display: flex;
    flex-direction: column;
    /* justify-content: flex-end; */
    margin-left: 26px;
    margin-bottom: 32px;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item .code_img {
    width: 90px;
    height: 90px;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item .title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(89, 89, 89, 1);
    text-align: center;
    /* margin-bottom: 16px; */
    margin-top: 8px;
  }

  .footer .top_footer .top_box .top_right_footer .cannel_item .code_img img {
    width: 90px;
    height: 90px;
  }

  .footer .bottom_footer .ip {
    width: 1200px;
    height: 20px;
    /* background-color: #fff; */
    margin: 34px auto;
    display: flex;
    justify-content: space-between;
    color: rgba(180, 180, 180, 1);
    font-size: 14px;
    font-weight: 400;
    /* align-items: center; */
  }
}

@media (min-width: 1200px) and (max-width: 1535px) {
  .footer {
    /* width: 100vw; */
    margin-top: 70px;
  }
}

.navbar {
  padding: 0;
}
//four.css
.block_top {
  display: none;
}

.top {
  position: relative;
  /* width: 100vw; */
  height: 29vw;
  /* 576 */
  opacity: 1;
  background-image: url('@/static/images/topbackground.png');
  background-size: 100%;
  /* background-position: right top; */
  background-repeat: no-repeat;
}

.topTitle {
  display: flex;
  flex-wrap: nowrap;
  position: absolute;
  left: 18vw;
  top: 7.5vw;
  font-size: 2.5vw;
  font-weight: 700;
  color: rgba(33, 33, 33, 1);
  vertical-align: top;
  white-space: nowrap;
}

.desc {
  left: 18vw;
  position: absolute;
  top: 12vw;
  font-size: 1.25vw;
  font-weight: 400;
  color: rgba(89, 89, 89, 1);
  white-space: nowrap;
}

.background {
  position: absolute;
  top: -4vw;
  right: 8vw;
  width: 40vw;
  height: 40vw;
  opacity: 1;
  background-image: url('https://suanjiayun.oss-cn-chengdu.aliyuncs.com/3.0/images/top_ai_new.png');
  background-repeat: no-repeat;
  background-size: auto 102%, 100% 100%;
  background-position: 105% 80%, 0%;
  z-index: 99;
}

.experienceButten {
  position: absolute;
  left: 18vw;
  top: 16vw;
  width: 10.68vw;
  height: 2.5vw;
  line-height: 2.5vw;
  text-align: center;
  background: rgba(63, 181, 73, 1);
  color: white;
  border: none;
  z-index: 99;
  white-space: nowrap;
  font-size: 0.84vw;
}

.experienceButten:hover {
  box-shadow: 0px 10px 20px rgba(65, 183, 75, 0.2);
  color: white;
  cursor: pointer;
}

.gpuBox {
  /* width: 100vw; */
  height: 38vw;
  /* 650 */
  background: rgba(245, 247, 255, 1);
  padding-top: 4vw;
}

.gpuContent {
  margin: 0 auto;
  width: 62.5vw;
  height: 19.792vw;
  /* height: 520px; */
  /* text-align: center; */
  display: flex;
  justify-content: space-around;
  /* justify-content: center; */
  align-items: center;
  margin-top: 5vw;
  margin-bottom: 6vw;
}

.gpuList {
  width: 19.792vw;
  height: 19.792vw;
  /* opacity: 1; */
  background-image: url('@/static/images/gpuWhite.png');
  background-repeat: no-repeat;
  background-size: 100%;
  /* margin-right: 32px; */
  position: relative;
}
.performanceKing {
  background-image: url('@/static/images/gpuhover.png');
  background-repeat: no-repeat;
  background-size: 100%;
}
.performanceKing:hover {
  box-shadow: 0px 10px 20px rgba(217, 217, 217, 0.4);
}
.gpuList:hover {
  width: 19.792vw;
  height: 19.792vw;
  background-image: url('@/static/images/gpuhover.png');
  background-repeat: no-repeat;
}

.gpuTitle {
  width: 100%;
  height: 3.08vw;
  /** 文本1 */
  font-size: 2.5vw;
  font-weight: 700;
  line-height: 3.08vw;
  color: rgba(33, 33, 33, 1);
  text-align: center;
  white-space: nowrap;
}

.performance {
  position: relative;
  left: 10.52%;
  top: 5.26%;
  width: 23.42%;
  height: 7.89%;
  opacity: 1;
  /** 文本1 */
  font-size: 1.0417vw;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  /* letter-spacing: 0px;
    line-height: 28.96px; */
  color: rgba(33, 33, 33, 1);
  vertical-align: top;
  white-space: nowrap;
}

.gpuModel {
  position: absolute;
  top: 18%;
  left: 12.52%;
  width: 35.52%;
  height: 11.84%;
  opacity: 1;
  /** 文本1 */
  font-size: 1.562vw;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  /* letter-spacing: 0px;
    line-height: 43.44px; */
  color: rgba(33, 33, 33, 1);
  /* vertical-align: top; */
  white-space: nowrap;
}

.gpuPrice {
  position: absolute;
  top: 7.5vw;
  left: 2.4vw;
  /* width: 210px;
    height: 74px; */
  /* width: 55.26%;
    height: 19.47%; */
  /* opacity: 1; */
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  white-space: nowrap;
}

.priceLogo {
  /* width: 14px;
    height: 36px; */
  /* width: 6.67%;
    height: 48.65%; */
  font-size: 1.25vw;
  font-weight: 400;
  /* letter-spacing: 0px; */
  /* line-height: 34.75px; */
  color: rgba(33, 33, 33, 1);
  /* text-align: center; */
  /* vertical-align: top; */
}

.price {
  /* width: 56.19%;*/
  height: 4vw;
  /* opacity: 1; */
  /* display: flex; */
  margin: 0 0.7vw;
  /** 文本1 */
  font-size: 3.125vw;
  font-weight: 400;
  /* letter-spacing: 0px; */
  line-height: 5vw;
  color: rgba(33, 33, 33, 1);
  text-align: center;
}

.time {
  /* width: 27.62%;
    height: 48.65%; */
  font-size: 1.25vw;
  font-weight: 400;
  /* letter-spacing: 0px; */
  /* line-height: 34.75px; */
  color: rgba(33, 33, 33, 1);
  /* text-align: center;
    vertical-align: top; */
}

.useButton {
  position: absolute;
  top: 74%;
  left: 10.53%;
  width: 78.94%;
  height: 15.79%;
  opacity: 1;
  border: 1px solid rgba(63, 181, 73, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.0417vw;
  /* padding: 15px 100px 15px 100px; */
  color: rgba(63, 181, 73, 1);
  white-space: nowrap;
  cursor: pointer;
}

.useButton:hover {
  background: rgba(63, 181, 73, 1);
  color: white;
}

.useBox {
  background-color: rgba(63, 181, 73, 1);
  width: 100%;
  height: 100%;
  background-image: url(@/static/images/useBackground.png);
  /* opacity: 0.4; */
  background-size: 100%;
  padding-bottom: 50px;
}

.useContent {
  width: 62.5%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
}

.useTitle {
  width: 100%;
  /* height: 34.72%; */
  margin-bottom: 50px;
  opacity: 1;
  /** 文本1 */
  font-size: 48px;
  font-weight: 700;
  line-height: 69.5px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  /* vertical-align: top; */
  padding-top: 70px;
}

.experienceBox {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 48px;
  cursor: pointer;
  white-space: nowrap;
}

.experience:hover {
  box-shadow: 0px 10px 20px rgba(46, 157, 55, 0.3);
  color: rgba(63, 181, 73, 1);
}

.experience {
  width: 111.4%;
  height: 100%;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 60px 15px 60px;
  color: rgba(63, 181, 73, 1);
}

.cooperationBox {
  /* width: 100vw; */
  background: rgba(245, 247, 255, 1);
  height: 40vw;
}

.customizedImg {
  /* width: 145px; */
  width: 7.553vw;
  height: 10.834vw;
  /* height: 208px; */
  position: absolute;
  right: 2%;
  top: 12%;
}

.cooperationTitle {
  /* width: 100vw; */
  font-weight: bolder;
  margin: 0 auto;
  text-align: center;
  font-size: 2.5vw;
  padding: 3vw 0;
}

.customizedBox {
  /* width: 380px;
    height: 290px; */
  width: 19.792vw;
  height: 15.104vw;
  opacity: 1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 1);
  position: relative;
  /* background-image: url('@/static/images/background1.png');
    background-size: 100%; */
  /* width: 380px;
    height: 290px;
    opacity: 1;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(222, 245, 232, 1) 100%);
    box-shadow: 0px 10px 20px rgba(217, 217, 217, 0.3); */
}

.customizedBox:hover {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(222, 245, 232, 1) 100%
  );
  box-shadow: 0px 10px 20px rgba(217, 217, 217, 0.3);
}

.customizedTitle {
  /* width: 120px;
    height: 45px; */
  width: 6.25vw;
  /* height: 2.344vw; */
  /* opacity: 1; */
  /* display: flex; */

  /** 文本1 */
  font-size: 1.56vw;
  /* font-size: 30px; */

  font-weight: 700;
  letter-spacing: 0px;
  /* color: rgba(63, 181, 73, 1); */
  color: rgba(31, 35, 41, 1);
  /* vertical-align: top; */
  /* margin-top: 12%;
    margin-left: 10%; */
  margin: 2.2vw 0 0.96vw 1.98vw;
}

.customizedContent {
  width: 16.146vw;
  /* width: 310px; */
  height: 4.55vw;
  /* height: 87px; */
  opacity: 1;
  display: flex;

  /** 文本1 */
  font-size: 1.0417vw;
  /* font-size: 20px; */

  font-weight: 400;
  letter-spacing: 0px;
  /* line-height: 28.96px; */
  color: rgba(31, 35, 41, 1);
  vertical-align: top;
  margin-left: 1.98vw;
  /* 10% */
}

.midBox2 {
  width: 62.5vw;
  /* margin-top: 5vw; */
  height: 15.104vw;
  /* height: 290px; */
  display: flex;
  /* display: block; */
  flex-wrap: wrap;
  margin: 0 auto;
  justify-content: space-around;
  /* align-items: center; */
}

.contactButton {
  width: 7.553vw;
  /* width: 145px; */
  height: 2.292vw;
  /* height: 44px; */
  opacity: 1;
  /* font-size: 16px; */
  font-size: 0.8334vw;
  border: 1px solid rgba(63, 181, 73, 1);

  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 1.98vw;
  margin-top: 0.96vw;
  /* 5% */
  cursor: pointer;
  white-space: nowrap;

  /* padding: 10px 120px 10px 121px; */
}

.contactButton:hover {
  background: rgba(63, 181, 73, 1);
  color: white;
}

.customizedButton {
  width: 19.792vw;
  /* height: 80px; */
  height: 4.167vw;
  opacity: 1;
  border-radius: 12px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 5px 7.4px rgba(202, 234, 206, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  /* padding: 24px 90px 24px 90px; */
  margin-top: 1.041vw;
  cursor: pointer;
  white-space: nowrap;
  font-size: 1.04vw;
}
.customizedButton:hover {
  font-size: 1.25vw;
}
.customizedLogo {
  /* width: 40px;
    height: 40px; */
  width: 2.084vw;
  height: 2.084vw;
  opacity: 1;
  margin-right: 10px;
}

.partnersName {
  font-weight: 700;
  color: rgba(33, 33, 33, 1);
  text-align: center;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}
</style>
